<template>
	<view class="container">
		<view class="major-type-box">
			<view class="item-box" @tap="tapItem" data-index="0">
				<view class="item">
					<view class="item-label" :class="{'item-label-active': isShowBox[0]}">本科</view>
					<view class="item-line" :class="{'item-line-active': isShowBox[0]}"></view>
				</view>
			</view>
			<view class="item-box" @tap="tapItem" data-index="1">
				<view class="item">
					<view class="item-label" :class="{'item-label-active': isShowBox[1]}">专科</view>
					<view class="item-line" :class="{'item-line-active': isShowBox[1]}"></view>
				</view>
			</view>
		</view>
		
		<view class="major-list-box" v-show="isShowBox[0]">
			<block v-for="(firstMajor, i) in oneList" :key="firstMajor.majorCategoryId">
				<view class="major-first" @tap="tapOneFirst(i)">
					<view class="major-first-img-name">
						<view class="major-first-img">
							<image src="../../static/images/arrow.png" :animation="oneFirstAnimationData[i]"></image>
						</view>
						<view class="major-first-name">{{firstMajor.majorCategoryName}}</view>
					</view>
					<view class="major-first-num">{{firstMajor.children.length}}</view>
				</view>
				<block v-for="(secondMajor, j) in firstMajor.children" :key="secondMajor.majorCategoryId">
					<view class="major-second" v-show="isShowOneSecond[i]" @tap="tapOneSecond(i, j)">
						<view class="major-second-img-name">
							<view class="major-second-img">
								<image src="../../static/images/arrow.png" :animation="oneSecondAnimationData[i][j]"></image>
							</view>
							<view class="major-second-name">{{secondMajor.majorCategoryName}}</view>
						</view>
						<view class="major-second-num">{{secondMajor.majorList.length}}</view>
					</view>
					<view class="major-third" v-show="isShowOneThird[i][j]">
						<view class="major-third-name" @tap="goDetail(thirdMajor.majorId)" v-for="thirdMajor in secondMajor.majorList" :key="thirdMajor.majorId">{{thirdMajor.majorName}}</view>
					</view>
				</block>
			</block>
		</view>
		
		<view class="major-list-box" v-show="isShowBox[1]">
			<block v-for="(firstMajor, i) in twoList" :key="firstMajor.majorCategoryId">
				<view class="major-first" @tap="tapTwoFirst(i)">
					<view class="major-first-img-name">
						<view class="major-first-img">
							<image src="../../static/images/arrow.png" :animation="twoFirstAnimationData[i]"></image>
						</view>
						<view class="major-first-name">{{firstMajor.majorCategoryName}}</view>
					</view>
					<view class="major-first-num">{{firstMajor.children.length}}</view>
				</view>
				<block v-for="(secondMajor, j) in firstMajor.children" :key="secondMajor.majorCategoryId">
					<view class="major-second" v-show="isShowTwoSecond[i]" @tap="tapTwoSecond(i, j)">
						<view class="major-second-img-name">
							<view class="major-second-img">
								<image src="../../static/images/arrow.png" :animation="twoSecondAnimationData[i][j]"></image>
							</view>
							<view class="major-second-name">{{secondMajor.majorCategoryName}}</view>
						</view>
						<view class="major-second-num">{{secondMajor.majorList.length}}</view>
					</view>
					<view class="major-third" v-show="isShowTwoThird[i][j]">
						<view class="major-third-name" @tap="goDetail(thirdMajor.majorId)" v-for="thirdMajor in secondMajor.majorList" :key="thirdMajor.majorId">{{thirdMajor.majorName}}</view>
					</view>
				</block>
			</block>
		</view>
	
	</view>
</template>

<script>
	import { myRequest, showToastMsg } from '../../utils'
	
	export default {
		data() {
			return {
				curIndex: 0,
				isShowBox: [true, false],
				isShowOneSecond: [],
				isShowOneThird: [],
				isShowTwoSecond: [],
				isShowTwoThird: [],
				animation: {},
				oneFirstAnimationData: [],
				oneSecondAnimationData: [],
				twoFirstAnimationData: [],
				twoSecondAnimationData: [],
				oneList: [],
				twoList: []
			}
		},
		
		onLoad() {
			
			this.animation = uni.createAnimation({
				duration: 200,
        timingFunction: 'ease',
			})
			
			this.fetchData()
			
		},
		
		methods: {
			
			fetchData() {
				const that = this
				let success = function(res) {
					
					if (res.data.code != 20000) {
						return showToastMsg(res.data.message)
					}
					
					that.oneList = res.data.data.oneList
					that.twoList = res.data.data.twoList
					
					for (let i = 0; i < that.oneList.length; i++) {
						that.isShowOneSecond[i] = false
						that.isShowOneThird[i] = []
						that.oneFirstAnimationData[i] = {}
						that.oneSecondAnimationData[i] = []
						for (let j = 0; j < that.oneList[i].children.length; j++) {
							that.isShowOneThird[i][j] = false
							that.oneSecondAnimationData[i][j] = {}
						}
					}
					
					for (let m = 0; m < that.twoList.length; m++) {
						that.isShowTwoSecond[m] = false
						that.isShowTwoThird[m] = []
						that.twoFirstAnimationData[m] = {}
						that.twoSecondAnimationData[m] = []
						for (let n = 0; n < that.twoList[m].children.length; n++) {
							that.isShowTwoThird[m][n] = false
							that.twoSecondAnimationData[m][n] = {}
						}
					}
					
				}
				
				let param = {
					url: '/major/all',
					data: {}
				}
				
				myRequest(param, success)
			},
			
			tapItem(e) {
				this.isShowBox[this.curIndex] = false
				this.curIndex = e.currentTarget.dataset.index
				this.isShowBox[this.curIndex] = true
			},
			
			tapOneFirst(i) {
				this.isShowOneSecond[i] = !this.isShowOneSecond[i]
				let deg = this.isShowOneSecond[i] ? 90 : 0
				this.animation.rotate(deg).step()
				this.oneFirstAnimationData[i] = this.animation.export()
				this.$forceUpdate()
			},
			
			tapOneSecond(i, j) {
				this.isShowOneThird[i][j] = !this.isShowOneThird[i][j]
				let deg = this.isShowOneThird[i][j] ? 90 : 0
				this.animation.rotate(deg).step()
				this.oneSecondAnimationData[i][j] = this.animation.export()
				this.$forceUpdate()
			},
			
			tapTwoFirst(i) {
				this.isShowTwoSecond[i] = !this.isShowTwoSecond[i]
				let deg = this.isShowTwoSecond[i] ? 90 : 0
				this.animation.rotate(deg).step()
				this.twoFirstAnimationData[i] = this.animation.export()
				this.$forceUpdate()
			},
			
			tapTwoSecond(i, j) {
				this.isShowTwoThird[i][j] = !this.isShowTwoThird[i][j]
				let deg = this.isShowTwoThird[i][j] ? 90 : 0
				this.animation.rotate(deg).step()
				this.twoSecondAnimationData[i][j] = this.animation.export()
				this.$forceUpdate()
			},
			
			goDetail(id) {
				uni.navigateTo({
					url: '/pages/major_detail/major_detail?id=' + id
				})
			}
			
		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}
	
	.container {
		width: 750rpx;
		height: auto;
	}
	
	.major-type-box {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		align-items: flex-end;
	}
	
	.item-box {
		width: 375rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: center;
	}
	
	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.item-label {
		margin-bottom: 20rpx;
		font-size: 28rpx;
	}
	
	.item-label-active {
		color: #5683ec;
	}
	
	.item-line {
		width: 70rpx;
		height: 4rpx;
		background-color: #ffffff;
	}
	
	.item-line-active {
		background-color: #5683ec;
	}
	
	.major-list-box {
		width: 750rpx;
		height: auto;
		margin-top: 20rpx;
	}
	
	.major-first {
		width: 750rpx;
		height: 88rpx;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.major-second {
		width: 750rpx;
		height: 88rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.major-first-img-name {
		display: flex;
		flex-direction: row;
		padding-left: 20rpx;
	}
	
	.major-second-img-name {
		display: flex;
		flex-direction: row;
		padding-left: 58rpx;
	}
	
	.major-first-name, .major-second-name {
		color: #666666;
		font-size: 28rpx;
		padding-left: 14rpx;
	}
	
	.major-first-img image, .major-second-img image {
		width: 28rpx;
		height: 28rpx;
	}
	
	.major-first-num, .major-second-num {
		font-size: 28rpx;
		color: #666666;
		padding-right: 30rpx;
	}
	
	.major-third {
		display: flex;
		flex-direction: column;
		padding-left: 100rpx;
		margin-bottom: 20rpx;
	}
	
	.major-third-name {
		font-size: 28rpx;
		color: #999999;
		height: 60rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
</style>
